<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="closeDialog"
      append-to-body
      title="事件接口选择"
  >

    <div  class="p16 flex-column-null-between container" style="height:500px">
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple" style="margin-left: 5px"  @click="OptionCardClose">
            <div slot="header" style="border-bottom:1px solid #e1e4e7" class="top-from">接口类别
              <el-button style="margin-left: 20px" type="success" size="mini" icon="el-icon-refresh"  @click="refreshInterClass"></el-button>
            </div>

            <div style="margin-top:20px;overflow: auto;height: 450px">
              <el-tree
                  v-loading="classLoading"
                  node-key="id"
                  :current-node-key="nowNodeId"
                  :data="classData"
                  :props="defaultProps"
                  default-expand-all
                  highlight-current
                  @node-click="handleNodeClick">

              </el-tree>
            </div>

          </div>
        </el-col>

        <el-col :span="18">

          <div class="grid-content bg-purple-light">
            <div>
              <div class="search-item">
                <el-input
                    size="small"
                    v-model="queryParams.keyWord"
                    class="input-width clear-input"
                    suffix-icon="el-icon-search"
                    clearable
                    placeholder="请输入查询内容"
                ></el-input>
              </div>
              <div class="search-item">
                <el-button type="primary" size="small"  @click="queryInterfaceList">搜索</el-button>
              </div>

            </div>

            <el-table
                tooltip-effect="dark"
                ref="singleTable"
                highlight-current-row
                @current-change="handleSelectEventInterChange"

                :data="tableData"
                size="mini"
                :row-style="{height:'0'}"
                style="width: 100%"
                border
                height="450px"
                v-loading="loading">
              <el-table-column
                  v-for="(item,index) in fields"
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :min-width="item.width"
                  :fixed="item.fixed"
              >
              </el-table-column>
            </el-table>

            <div class="page-container" style="float:right">
              <el-pagination
                  :page-sizes="[10, 20, 30, 50]"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="nowPage"
                  :page-size="10"
                  layout="sizes,total, prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>



          </div>
        </el-col>
      </el-row>
    </div>

    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>
  </el-dialog>

</template>
<script>
import {getClassTree,saveClass,removeClass,getInterList,addInterfaceConfig,saveInterfaceConfig,removeInterface} from '@/api/workflowInterface.js';
import {utils} from "@v/process/processEditor/utils/common";
export default {
  components:{
  },
  data() {
    return {

      labelPosition:'left',
      dialogVisible: false,
      //关联用户相关属性
      relateUserDrawer:false,
      direction: 'rtl',
      relateDrawerTitle:'关联用户',



      //侧边栏相关属性
      topNumber:0,
      leftNumber:0,
      optionCardShow:false,
      nowInterClass:{},
      nowEditInterClass:{},
      nowInter:{},

      total: 0,
      classLoading: false,
      loading: false,
      nowPage:1,
      queryParams:{
        pageNum:1,
        pageSize:10,
        keyWord:"",
        classId:""
      },
      //类别
      classData:[],
      defaultProps:{
        children: 'child',
        label: 'className',
        id:"classId",
      },
      nowNodeId:0,
      fields:[
        {
          label:"接口类型",
          prop:"interType",
          width:150,
        },{
          label:"接口名称",
          prop:"interName",
          width:150
        },{
          label:"接口描述",
          prop:"desc",
          width:100
        },{
          label:"操作",
          prop:"operation",
          width:200,
          fixed: "right",
        }
      ],
      tableData: []
    }
  },
  created(){
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      this.queryInterfaceClass();
    },
    closeDialog(){
      this.dialogVisible = false
      this.loading = false
    },
    submit(){
      if (this.nowInter == null) {
        this.$message.error("请选择接口");
        return;
      }
      this.closeDialog();
      this.$emit("success",this.nowInter);
    },
    async queryInterfaceClass() {
      let res = await getClassTree();
      this.classData = res.data.child;
    },
    refreshInterClass() {
      this.classLoading = true;
      this.queryInterfaceClass();
      this.tableData = [];
      this.queryParams.keyWord = '';
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.classLoading = false;
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
    },
    handleSelectEventInterChange(row){
      this.nowInter = row;
    },
    async queryInterfaceList() {
      if (this.nowInterClass == null) {
        return;
      }
      this.loading = true;
      this.queryParams.classId = this.nowInterClass.classId;
      let res = await getInterList(this.queryParams);
      let content = res.data;
      this.tableData = content;
      this.loading = false;
    },

    handleNodeClick(interClass) {
      this.loading = true;
      this.nowInterClass = interClass;
      this.queryInterfaceList();
    },
    // 点击框外区域 隐藏菜单
    OptionCardClose(event) {
      var currentCli = document.getElementById("option-button-group");
      if (currentCli) {
        if (!currentCli.contains(event.target)) {
          //点击到了id为option-button-group以外的区域，就隐藏菜单
          this.optionCardShow = false;
        }
      }
    }
  }

}


function getParentData(data,classId){
  for(var classD in data){
    if(classId === data[classD].classId){
      return data;
    }
    if(data[classD].child && data[classD].child.length > 0){
      let result = getParentData(data[classD].child,classId);
      if(result != null){
        return result;
      }
    }
  }
}

</script>

<style  lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /* background: #e5e9f2; */
}
.top-from{
  height: 50px;
}
.grid-content {
  border: 1px solid #e1e4e7;
  border-radius: 4px;
  margin-top: 3px;
  background: #fff;
  height: 450px;
  overflow: auto;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.option-card-button {
  width: 100%;
  margin-left: 0;
  font-size: 12px;
  border-radius: 0;
}
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
</style>